<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="nav-bar">
			<view class="back-button" @click="goBack">
				<text class="icon">&lt;</text>
			</view>
			<text class="nav-title">查看申请流程</text>
		</view>

		<!-- 工单类型卡片列表 -->
		<view class="type-grid" v-if="!selectedType">
			<view class="type-card" v-for="item in typeList" :key="item.typeId" @click="selectType(item)">
				<text class="type-name">{{ item.typeName }}</text>
				<br>
				<text class="type-description">{{ item.description }}</text>
			</view>
		</view>

		<!-- 申请流程及填写信息 -->
		<view class="process-section" v-else>
			<view class="card process-card">
				<text class="card-title">{{ selectedType.typeName }}</text>
				<image v-if="flowDiagramUrl" :src="flowDiagramUrl" mode="widthFix" class="flow-diagram"></image>
				<text class="description">{{ selectedType.description }}</text>
			</view>

			<view class="card form-card">
				<text class="card-title">填写信息</text>

				<view class="form-item">
					<text class="form-label">故障描述</text>
					<textarea v-model="formData.description" placeholder="请输入故障描述" class="form-textarea"></textarea>
				</view>

				<view class="form-item">
					<text class="form-label">故障位置</text>
					<input v-model="formData.place" placeholder="请输入故障位置" class="form-input" />
				</view>

				<view class="form-item">
					<text class="form-label">紧急程度</text>
					<picker mode="selector" :range="urgencyOptions" @change="onUrgencyChange">
						<view class="picker-display">
							{{ formData.urgency === 0 ? '请选择' : urgencyOptions[formData.urgency - 1] }}
						</view>
					</picker>
				</view>

				<view class="form-item">
					<text class="form-label">附件上传</text>
					<input type="file" @change="handleFileUpload" multiple accept="image/*,.doc,.docx,.pdf,.txt" />
				</view>

				<button class="submit-button" @click="submitForm">提交申请</button>
			</view>
		</view>

		<!-- 错误提示 -->
		<view class="error-message" v-if="errorMessage">
			{{ errorMessage }}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				typeList: [],
				selectedType: null,
				formData: {
					description: '',
					place: '',
					urgency: 0,
					files: []
				},
				errorMessage: '',
				urgencyOptions: ['低', '中', '高'],
				flowDiagramUrl: ''
			};
		},
		onLoad() {
			this.loadTypeList();
		},
		methods: {
			async loadTypeList() {
				try {
					const token = uni.getStorageSync('token');
					const res = await uni.request({
						url: "http://localhost:8082/api/applicant/TypeList",
						header: {
							'Authorization': 'Bearer ' + token
						},
						method: 'get'
					});

					if (res.statusCode === 200 && res.data.code === 1) {
						this.typeList = res.data.data.map(item => ({
							typeId: item.typeId,
							typeName: item.typeName,
							description: item.description
						}));
					} else {
						this.showToast("加载工单类型失败，请稍后重试");
					}
				} catch (err) {
					this.showToast("请求接口失败，请稍后重试");
				}
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			async selectType(type) {
				this.selectedType = type;
				this.formData = {
					description: '',
					place: '',
					urgency: 0,
					files: []
				};
				this.errorMessage = '';

				try {
					const token = uni.getStorageSync('token');
					const res = await uni.request({
						url: `http://localhost:8082/api/common/typeDiagram?orderTypeId=${type.typeId}`,
						header: {
							'Authorization': 'Bearer ' + token
						},
						method: 'GET'
					});

					if (res.statusCode === 200 && res.data.code === 1) {
						this.flowDiagramUrl = 'data:image/png;base64,' + res.data.data;
					} else {
						this.flowDiagramUrl = '';
					}
				} catch (err) {
					this.showToast("请求接口失败，请稍后重试");
				}
			},
			handleFileUpload(e) {
				const files = e.target.files;
				if (files.length > 5) {
					this.showToast("最多只能上传5个文件");
					return;
				}
				for (let file of files) {
					if (file.size > 20 * 1024 * 1024) {
						this.showToast("单个文件不能超过20MB");
						return;
					}
				}
				this.formData.files = files;
			},
			async submitForm() {
				if (!this.formData.description || !this.formData.place) {
					this.showToast("故障描述和故障位置为必填项");
					return;
				}
				if (this.formData.urgency === 0) {
					this.showToast("请选择紧急程度");
					return;
				}

				try {
					const token = uni.getStorageSync('token');
					const postData = {
						typeId: this.selectedType.typeId,
						urgency: this.formData.urgency,
						description: this.formData.description,
						place: this.formData.place,
						files: Array.from(this.formData.files).map(file => ({
							name: file.name,
							type: file.type,
							size: file.size
						}))
					};

					const res = await uni.request({
						url: "http://localhost:8082/api/applicant/createOrder",
						header: {
							'Authorization': 'Bearer ' + token,
							'Content-Type': 'application/json'
						},
						method: 'POST',
						data: JSON.stringify(postData)
					});

					if (res.statusCode === 200 && res.data.code === 1) {
						this.showToast("提交成功");
						const orderId = res.data.data;
						uni.setStorageSync('orderId', orderId);

						this.formData = {
							description: '',
							place: '',
							urgency: 0,
							files: []
						};
						this.selectedType = null;
						uni.navigateTo({
							url: `/pages/user/orderDetail/orderDetail?orderId=${orderId}`
						});
					} else {
						this.showToast("提交失败，请稍后重试");
					}
				} catch (err) {
					this.showToast("请求接口失败，请稍后重试");
				}
			},
			onUrgencyChange(e) {
				this.formData.urgency = parseInt(e.detail.value) + 1;
			},
			showToast(message) {
				uni.showToast({
					title: message,
					icon: 'none',
					duration: 2000
				});
			}
		}
	};
</script>

<style scoped>
	.container {
		padding: 20px;
		background: linear-gradient(to bottom, #e6f0ff, #f8fbff);
		min-height: 100vh;
		font-family: 'PingFang SC', sans-serif;
	}

	/* 导航栏 */
	.nav-bar {
		display: flex;
		align-items: center;
		position: relative;
		height: 50px;
		background: #1976d2;
		color: #fff;
		border-radius: 10px;
		margin-bottom: 20px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	}

	.back-button {
		position: absolute;
		left: 15px;
		display: flex;
		align-items: center;
		cursor: pointer;
	}

	.nav-title {
		flex: 1;
		text-align: center;
		font-size: 18px;
		font-weight: 600;
	}

	.icon {
		font-size: 20px;
	}

	/* 工单类型卡片 */
	.type-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 15px;
	}

	.type-card {
		background: #ffffff;
		border-radius: 12px;
		padding: 16px;
		text-align: center;
		font-size: 16px;
		color: #1976d2;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		transition: transform 0.2s;
	}

	.type-card:active {
		transform: scale(0.98);
	}

	.type-name {
		font-weight: bold;
	}

	.type-description {
		margin-top: 8px;
		font-size: 12px;
		color: #666;
		line-height: 1.4;
	}

	/* 卡片统一样式 */
	.card {
		background: #ffffff;
		border-radius: 12px;
		padding: 20px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
		margin-bottom: 20px;
	}

	.card-title {
		font-size: 16px;
		font-weight: 600;
		color: #1976d2;
		margin-bottom: 15px;
	}

	.flow-diagram {
		width: 100%;
		margin-bottom: 15px;
		border-radius: 8px;
		border: 1px solid #eee;
	}

	.description {
		font-size: 14px;
		color: #666;
		line-height: 1.5;
	}

	.form-item {
		margin-bottom: 15px;
	}

	.form-label {
		font-size: 15px;
		font-weight: 600;
		color: #333;
		margin: 15px 0 8px 0;
		display: flex;
		align-items: center;
		position: relative;
	}

	/* 左侧蓝色小竖线效果 */
	.form-label::before {
		content: '';
		display: inline-block;
		width: 4px;
		height: 16px;
		background-color: #1976d2;
		border-radius: 2px;
		margin-right: 8px;
	}


	.form-input {
		height: 50px;
		width: 100%;
		padding: 10px 12px;
		border: 1px solid #ddd;
		border-radius: 8px;
		font-size: 14px;
		background: #fff;
		box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
		box-sizing: border-box;
	}

	.form-textarea {
		width: 100%;
		height: 120px;
		padding: 10px 12px;
		border: 1px solid #ddd;
		border-radius: 8px;
		font-size: 14px;
		resize: vertical;
		background: #fff;
		box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
		box-sizing: border-box;
	}

	.picker-display {
		width: 100%;
		padding: 10px;
		border: 1px solid #ddd;
		border-radius: 8px;
		background: #f9f9f9;
		color: #333;
		box-sizing: border-box;
	}

	.submit-button {
		width: 100%;
		padding: 12px;
		background: linear-gradient(to right, #1976d2, #42a5f5);
		color: white;
		font-size: 16px;
		border: none;
		border-radius: 10px;
		cursor: pointer;
		font-weight: 600;
		transition: background 0.3s;
	}

	.submit-button:active {
		background: #1565c0;
	}

	.error-message {
		color: #e53935;
		text-align: center;
		font-size: 14px;
		margin-top: 15px;
	}
</style>